<template>
	<div :class="mode">
		<div class="hot">
			<div class="hot-title" v-if="mode === 'pc'">热门文章</div>
			<div class="hot-ranking" v-for="(value, index) in 10">
				<div class="hot-ranking-icon" :class="{ white: index < 3 }">
					<img :src="icons[index < 3 ? index : 3]" alt="" />
					<span :class="{ scale: mode === 'mobile' && index >= 9 }">{{ index + 1 }}</span>
				</div>
				<div class="hot-ranking-new">NEW</div>
				<div class="hot-ranking-text">
					<div>
						1688専属API高速接続で実現した便利な機能をご紹介688専属API高速接続で実現しな機能をご紹介688専属API高速接続で実現しな機能をご紹介688専属API高速接続で実現した便利な機能をご紹介
					</div>
				</div>
			</div>
			<div class="hot-icon" v-if="mode === 'pc'">
				<img src="@/assets/svgs/hot_icon.svg" alt="" />
			</div>
		</div>
	</div>
</template>

<script setup>
	import one_svg from '@/assets/svgs/ranking_one.svg';
	import two_svg from '@/assets/svgs/ranking_two.svg';
	import three_svg from '@/assets/svgs/ranking_three.svg';
	import normal_svg from '@/assets/svgs/ranking_normal.svg';
	defineProps({
		mode: {
			type: String,
			default: 'mobile',
		},
	});
	const icons = [one_svg, two_svg, three_svg, normal_svg];
</script>

<style lang="scss" scoped>
	.pc {
		cursor: pointer;
		.hot {
			// width: 360px;
			@include scaleWidth(360px, 330px);
			height: 477px;
			padding: 20px;
			background-color: var(--blog-classify-bg-color);
			border-radius: var(--blog-box-radius);
			position: relative;
			.hot-title {
				@include font(_, 18px, 30px, 700, var(--blog-normal-text-color));
				margin-bottom: 22px;
			}
			.hot-ranking {
				@include flex();
				// width: 300px;
				@include scaleWidth(300px, 270px);
				height: 22px;
				margin-bottom: 15px;
				position: relative;
				z-index: 1;
				.hot-ranking-icon {
					width: 22px;
					height: 26px;
					flex-shrink: 0;
					margin-right: 10px;
					@include flex;
					@include font(_, 14px, _, 400, var(--blog-normal-text-color-black));
					position: relative;
					&.white {
						color: white;
					}
					img {
						width: 100%;
						height: 100%;
					}
					span {
						position: absolute;
						left: 50%;
						top: 50%;
						transform: translate(-50%, -60%);
					}
				}
				.hot-ranking-new {
					width: 41px;
					height: 18px;
					flex-shrink: 0;
					border-radius: var(--blog-box-radius);
					background-color: var(--blog-box-bg-color-blue);
					margin-right: 5px;
					@include font(_, 12px, 22px, 900, white);
					@include flex;
				}
				.hot-ranking-text {
					@include font(_, 14px, 22px, 400, var(--blog-normal-text-color));
					@include text-overflow();
					&:hover {
						color: var(--guide-hover-text-color);
					}
					div {
						@include text-overflow();
					}
				}
			}
			.hot-icon {
				width: 77px;
				height: 100px;
				position: absolute;
				right: 12px;
				top: 0;
			}
		}
	}
	.mobile {
		.hot {
			// width: 710px;
			// height: 1092px;
			@include mobileVwCalc(710px);
			padding: 20px;
			box-sizing: border-box;
			background-color: white;
			border-radius: var(--blog-box-mobile-radius);
			position: relative;
			.hot-ranking {
				@include flex();
				// width: calc(710px - 40px);
				@include mobileVwCalc(calc(710px - 40px));
				height: 72px;
				margin-bottom: 35px;
				@include text-overflow(2, 'float');
				.hot-ranking-icon {
					width: 44px;
					height: 52px;
					flex-shrink: 0;
					margin-right: 20px;
					float: left;
					@include flex;
					@include font(_, 28px, _, 400, var(--blog-normal-text-color-black));
					transform: translateY(10px);
					position: relative;
					&.white {
						color: white;
					}
					img {
						width: 100%;
						height: 100%;
					}
					span {
						position: absolute;
						left: 50%;
						top: 50%;
						transform: translate(-50%, -60%);
						&.scale {
							font-size: 18px;
						}
					}
				}
				.hot-ranking-new {
					width: 60px;
					height: 28px;
					flex-shrink: 0;
					border-radius: var(--blog-box-radius);
					background-color: var(--blog-box-bg-color-blue);
					margin-right: 5px;
					@include font(_, 20px, 28px, 700, white);
					@include flex;
					align-self: flex-start;
					transform: translateY(8px);
					float: left;
				}
				.hot-ranking-text {
					@include font(_, 28px, 36px, 400, var(--blog-normal-text-color));
				}
			}
		}
	}
</style>
